<template>
    <view class="index">
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				title="我的邀请"
				titleColor="#FFF"
                :border-bottom="false"
                :is-fixed="false"
                custom-class="nav-bg"
				:background="{background: 'transparent'}"
				back-icon-color="#FFF"
            > 
            </u-navbar>
        </u-sticky>
		
		<view class="main-box">
			<tabs  :config="tabsConfig"  :active="tabActive" @change="onTabChange">
				<tab v-for="(item, index) in tabList" :key="item.type" :title="item.name">
					<view class="invite-list">
						<view class="invite-item row" v-for="(inviteItem, inviteIndex) in inviteList" :key="inviteIndex">
							<image :src="inviteItem.avatar" class="invite-img" />
							<view class="content flex1 column">
								<view class="info row">
									<view class="name">{{inviteItem.nickname}}</view>
									<!-- 购买卡包时显示 -->
									<template v-if="inviteItem.is_buy_card_case == 1">
										<view class="label">{{inviteItem.is_distribution == 1 ? '大熊猫' : '小熊猫'}}</view>
										<view class="level">LV{{inviteItem.user_card_lv}}</view>
									</template>
								</view>
								<!-- 购买卡包时显示 -->
								<view class="time" v-if="inviteItem.is_buy_card_case == 1">卡包购买时间:{{ inviteItem.card_purchase_time}}</view>
								<!-- 没有购买卡包时显示 -->
								<view class="time" v-else>未购买</view>
							</view>
						</view>
						<loading-footer :status="status" slotEmpty>
								<u-empty text="暂无邀请~" slot="empty"></u-empty>
						</loading-footer>
						<!-- <view class="invite-item row">
							<image src="" class="invite-img" />
							<view class="content flex1 column">
								<view class="info row">
									<view class="name">Hellokity</view>
									<view class="label">小熊猫</view>
									<view class="level">LV1</view>
								</view>
								<view class="time">卡包购买时间:2024/09/13</view>
							</view>
						</view> -->
					</view>
				</tab>
			</tabs>
		</view>
	

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { myInvite } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare } from '@/api/app'



const app = getApp()
export default {
    data() {
        return {
			tabActive: 0,
			tabList: [
				{
					name: '我的邀请',
					type: 1,
				},
				{
					name: '我的下级',
					type: 2,
				}
			],
			tabsConfig: {
				// 字体大小 rpx
				fontSize: 28,
				// 字体颜色
				color: '#333',
				// 激活字体颜色
				activeColor: '#366667',
				borderRadius: '16rpx 16rpx 0 0',
				// 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
				underLineWidth: 46,
				// 下划线高度 rpx
				underLineHeight: 10,
				// 下划线颜色
				underLineColor: 'rgba(54,102,103,0.68)'
			},
			
			bambooNum: '',
			widthDrawConfig: {},
			
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
			inviteList: [],
		
      
            navBg: 0,
            navList: [],
            news: [],

   
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            enable: true,
        }
    },
	computed: {
	    ...mapGetters(['inviteCode', 'appConfig']),
		inviteType(){
			let typeObj = {
				0: 'direct', // 邀请
				1: 'indirect' // 下级
			}
			return typeObj[this.tabActive]
		}
	},
    async onLoad(options) {
		console.log('options---', options)
		this.getMyInviteFun()
		
    
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        setTabbar()
        this.navHeight = app.globalData.navHeight

        console.log(this.appConfig)
    },
    async onShow() {
        this.$nextTick(function () {
            getRect('.index').then((res) => {
                if (res.top == 0) {
                    this.navBg = 0
                }
            })
        })

        // #ifdef H5
        this.enable = true
        // #endif
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
        
    },
    onPullDownRefresh() {
    
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
      
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    setTabbar()
                }
            } catch (e) {
                uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		async getMyInviteFun() {
			let params = {
				type: this.inviteType, // 邀请（direct）, 下级（	indirect）
			}
		    let { page, inviteList, status } = this
		    const data = await loadingFun(myInvite, page, inviteList, status, params)
		    if (!data) return
		    this.page = data.page
		    this.inviteList = data.dataList
		    this.status = data.status
		},
		onTabChange(active){
			console.log('active', active)
			this.tabActive = active;
			this.page = 1
			this.inviteList = []
			this.status = loadingType.LOADING
			this.getMyInviteFun()
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100vh;
	background: #F5F5F5;
}

.main-box{
	padding: 20rpx;
	.invite-list{
		background: #FFF;
		.invite-item{
			padding: 40rpx 0;
			margin: 0 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			.invite-img{
				width: 96rpx;
				height: 96rpx;
				border-radius: 96rpx;
				margin-right: 28rpx;
			}
			.content{
				.info{
					.name{
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 46rpx;
						margin-right: 30rpx;
					}
					.label{
						padding: 6rpx 14rpx;
						background: rgba(17,101,104,0.18);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #116568;
						line-height: 34rpx;
						margin-right: 12rpx;
					}
					.level{
						padding: 6rpx 32rpx;
						background: rgba(255,251,0,0.38);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #FFAB2D;
						line-height: 34rpx;
					}
				}
				.time{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}
		}
	}
}

.nav-bg{
	
}

.index {
	background: url() no-repeat;
    background-size: 100% 882rpx;
	min-height: 882rpx;
}
</style>
